<!-- -------------------工单任务------------- -->

<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.MissionNumber"
            placeholder="请输入任务名称/编号"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.WorkOrderNumber"
            placeholder="请输入工单名称/编号"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.Processname"
            placeholder="请选择工序"
            clearable
          >
            <el-option
              v-for="(a, index) in bindProcess"
              :key="index"
              :label="a.text"
              :value="a.text"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.State"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="(a, index) in bindState"
              :key="index"
              :label="a.text"
              :value="a.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="formInline.Technologicalprocess"
            placeholder="请选择工艺流程"
            clearable
          >
            <el-option
              v-for="(a, index) in bindTechnologicalProcess"
              :key="index"
              :label="a.text"
              :value="a.text"
            />
          </el-select>
        </el-form-item>
        <div v-show="showsta">
          <el-form-item>
            <el-select
              v-model="formInline.Sitename"
              placeholder="请选择站点"
              clearable
            >
              <el-option
                v-for="(a, index) in bindSite"
                :key="index"
                :label="a.text"
                :value="a.text"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="formInline.CreationTinme"
              type="date"
              placeholder="请选择计划开始时间"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="formInline.Completedate"
              type="date"
              placeholder="请选择计划结束时间"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="formInline.Runplantdate"
              type="date"
              placeholder="请选择实际开始时间"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="formInline.Completedate"
              type="date"
              placeholder="请选择实际结束时间"
              clearable
            />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="Chaxun">查询</el-button>
          <el-button type="primary" @click="showsta = !showsta" plain>{{
            showsta == true ? "收起" : "更多"
          }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="序号" width="120" />
        <el-table-column
          property="missionnumber"
          label="任务编号"
          width="120"
        />
        <el-table-column property="taskname" label="任务名称" width="120">
          <template #default="scope">
            <span
              style="color: blue"
              @click="details(scope.row.missionnumber)"
              >{{ scope.row.taskname }}</span
            ></template
          >
        </el-table-column>
        <el-table-column property="sitename" label="站点名称" width="120" />
        <el-table-column
          property="workordernumber"
          label="工单编号"
          width="120"
        />
        <el-table-column
          property="workOrderName"
          label="工单名称"
          width="120"
        />
        <el-table-column
          property="technologicalprocess"
          label="工艺流程"
          width="120"
        />
        <el-table-column property="processname" label="工序名称" width="120" />
        <el-table-column
          property="procedurenumber"
          label="工序编号"
          width="120"
        />
        <el-table-column
          property="plannedquantity"
          label="计划数量"
          width="120"
        />
        <el-table-column
          property="realquantity"
          label="实际生产数量"
          width="120"
        />
        <el-table-column label="计划开工时间" width="120">
          <template #default="scope">{{
            scope.row.creationTime.substring(0, 10)
          }}</template>
        </el-table-column>
        <el-table-column label="计划完工时间" width="120">
          <template #default="scope">{{
            scope.row.completedate.substring(0, 10)
          }}</template>
        </el-table-column>
        <el-table-column
          property="plannedproductiontime"
          label="计划生产时长"
          width="120"
        />
        <el-table-column label="实际开工时间" width="120">
          <template #default="scope">{{
            scope.row.runplantdate.substring(0, 10)
          }}</template>
        </el-table-column>
        <el-table-column label="实际完工时间" width="120">
          <template #default="scope">{{
            scope.row.completedate.substring(0, 10)
          }}</template>
        </el-table-column>
        <el-table-column
          property="actualproductiontime"
          label="实际生产时长"
          width="120"
        />
        <el-table-column property="states" label="状态" width="120">
          <template #default="ttt">
            <span v-if="ttt.row.states == 10" style="color: gray">未派工</span>
            <span v-if="ttt.row.states == 20" style="color: blueviolet"
              >已下达</span
            >
            <span v-if="ttt.row.states == 30" style="color: blue">进行中</span>
            <span v-if="ttt.row.states == 40" style="color: green">已完成</span>
            <span v-if="ttt.row.states == 50" style="color: orange"
              >已关闭</span
            >
            <span v-if="ttt.row.states == 60" style="color: red">已暂停</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button
              v-if="scope.row.states == 10"
              type="text"
              @click="paigong(scope.row.missionnumber)"
              >派工</el-button
            >
            <el-button v-if="scope.row.states == 20" type="text"
              >开工</el-button
            >
            <el-button v-if="scope.row.states == 20 || 30" type="text"
              >关闭</el-button
            >
            <el-button v-if="scope.row.states == 30" type="text"
              >报工</el-button
            >
            <el-button v-if="scope.row.states == 30" type="text"
              >完成</el-button
            >
            <el-button v-if="scope.row.states == 40 || 50" type="text"
              >重启</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="formInline.pageindex"
        v-model:page-size="formInline.pagesize"
        :page-sizes="[5, 10, 20, 30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
  
<script>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { TicketTaskShow } from "../../api/tickettask";
import { GetDictionary } from "../../api/Dictionaries";
//分页字段
export default {
  setup() {
    //查询条件
    const formInline = reactive({
      pageindex: 1,
      pagesize: 5,
      MissionNumber: "",
      WorkOrderNumber: "",
      Processname: "",
      State: null,
      Technologicalprocess: "",
      CreationTinme: "",
      Completedate: "",
      Runplantdate: "",
      Sitename: "",
    });
    const bindProcess = ref({});
    const bindState = ref({});
    const bindTechnologicalProcess = ref({});
    const bindSite = ref({});
    const total = ref(0);
    const Chaxun = () => {
      Show();
    };
    //查询方法/显示方法
    const Show = () => {
      //console.log('submit!')
      TicketTaskShow(formInline).then((res) => {
        tableData.value = res.result.items;
        total.value = res.result.totalCount;
        console.log(res);
      });
      GetDictionary("工序").then((res) => {
        bindProcess.value = res.result;
      });
      GetDictionary("工单任务状态").then((res) => {
        bindState.value = res.result;
      });
      GetDictionary("工艺流程").then((res) => {
        bindTechnologicalProcess.value = res.result;
      });
      GetDictionary("站点").then((res) => {
        bindSite.value = res.result;
      });
    };
    Show();
    //分页赋值
    const handleSizeChange = (val) => {
      formInline.pagesize = val;
      Show();
    };
    const handleCurrentChange = (val) => {
      formInline.pageindex = val;
      Show();
    };
    const tableData = ref([]);
    //更多
    const showsta = ref(false);
    //编辑
    const handleClick = () => {
      console.log("click");
    };
    //名称详情
    const router = useRouter();
    const details = (id) => {
      router.push({ path: "/TicketTaskDetails", query: { id: id } });
      //router.push("/TicketTaskDetails");
    };
    const paigong = (id) => {
      router.push({ path: "/TicketTaskAdd", query: { id: id } });
    };
    return {
      tableData,
      total,
      formInline,
      showsta,
      bindProcess,
      bindState,
      bindTechnologicalProcess,
      bindSite,
      details,
      Chaxun,
      handleSizeChange,
      handleCurrentChange,
      paigong,
    };
  },
};
</script>